<template>
  <u-form :schema="formSchema" ref="form" :dataSource="regForm" :slotCount="1">
    <template #index1>
      <a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码' }]">
        <a-row>
          <a-col :span="12">
            <a-input placeholder="验证码" v-model:value="regForm.code" allowClear />
          </a-col>
          <a-col :span="12">
            <u-button
              type="primary"
              block
              color="#F44"
              @click="handleOnClickToSendCode"
              :disabled="disabled"
            >{{ sendCodeButtonText }}</u-button>
          </a-col>
        </a-row>
      </a-form-item>
    </template>
    <template #footer>
      <u-button @click="handleOnClickToReg" type="primary" color="#F00">注册</u-button>
      <u-button @click="handleOnClickToUpdateLocale" type="primary" color="#F00">修改语言</u-button>
    </template>
  </u-form>
</template>

<script>
import { reg } from "../../access/api/user/index";
import { sendCode, updateLocale } from "api/common/index";

import UICLI from "components/ui-cli";

import { Input, Form, Row, Col } from "ant-design-vue";

import { FormItemType } from "assets/js/Constant";

import { handleOnValidate2LoginName } from "assets/js/Validate";
import { hex_md5, showMess, isTel, isEmail } from "utils/Util";

const formSchema = {
  options: {
    labelCol: 4,
    wrapperCol: 20,
    layout: "vertical"
  },
  groups: [
    {
      grid: 1,
      fields: [
        {
          type: FormItemType.INPUT, // password textarea number
          label: "登录账号",
          name: "loginName",
          placeholder: "邮箱/手机号",
          rules: [
            { required: true, message: "请输入登录账号" },
            { validator: handleOnValidate2LoginName }
          ]
        },
        {
          type: FormItemType.PASSWORD,
          label: "登录密码",
          name: "loginPwd",
          placeholder: "密码",
          rules: [{ required: true, message: "请输入登录密码" }]
        }
      ]
    }
  ]
};

export default {
  name: "Reg",
  components: {
    UForm: UICLI.UForm,
    UButton: UICLI.UButton,
    AInput: Input,
    AFormItem: Form.Item,
    ARow: Row,
    ACol: Col
  },
  data() {
    return {
      FormItemType,
      formSchema,
      regForm: {
        loginName: "",
        loginPwd: "",
        loginType: 1,
        code: ""
      },

      disabled: false,
      sendCodeButtonText: "发送验证码",
      time: 60
    };
  },
  methods: {
    handleOnClickToReg() {
      this.$refs.form.$refs.form
        .validate()
        .then(() => {
          const loginPwd = hex_md5(this.regForm.loginPwd);
          reg({
            loginName: this.regForm.loginName,
            loginPwd: loginPwd,
            code: this.regForm.code,
            // 手机号注册：1 邮箱注册：2 否则 -1（后台会对该值进行限定）
            loginType: isTel(this.regForm.loginName)
              ? 1
              : isEmail(this.regForm.loginName)
              ? 2
              : -1
          }).then(res => {
            if (res) {
              // 登录成功
              showMess("注册成功, 请登录");
              this.$router.push("/login");
            }
          });
        })
        .catch(error => {
          console.log("error", error);
        });
    },
    handleOnClickToSendCode() {
      // 发送验证码的操作
      sendCode({
        loginName: this.regForm.loginName,
        loginType: isTel(this.regForm.loginName)
          ? 1
          : isEmail(this.regForm.loginName)
          ? 2
          : -1,
        model: "REG"
      }).then(res => {
        if (res) {
          showMess("已发送");
          this.disabled = true;
          const timer = setInterval(() => {
            this.sendCodeButtonText = `${--this.time}s后再次发送`;
            if (this.time == 0) {
              this.disabled = false;
              this.sendCodeButtonText = "发送验证码";
              clearInterval(timer);
            }
          }, 1000);
        }
      });
    },
    handleOnClickToUpdateLocale() {
      updateLocale({
        locale: "en-US"
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>